<template>
  <f-view :title="'订单详情'">
    <view class="bg">
      <view class="w-100-p mb-50 top-state">
        <view class="font28 bolder txt-center mb20">已取消</view>
        <view class="font14 gray mb20">下单时间 2022-12-22 23:23:23</view>
      </view>
      <view class="pick-bg mb20">
        <view class="mb20">暂无物流信息</view>
        <view class="line mb20"></view>
        <view class="flex-center mb20">
          <view class="title">快递编号：</view>
          <view>暂无快递编号</view>
        </view>
        <view class="flex-center mb20">
          <view class="title">收货人：</view>
          <view>陈啊三</view>
        </view>
        <view class="flex-center mb20">
          <view class="title">收货地址：</view>
          <view>北京紫禁城</view>
        </view>
      </view>
      <view class="good-bg mb20">
        <view class="flex-center-between mb20">
          <view class="bolder font22">共1份商品</view>
          <view class="gray">未支付</view>
        </view>
        <view class="cell flex mb20">
          <view class="pic mr10 not-shring"></view>
          <view class="flex-center-between tmp ">
            <view class="ellipsis">北海道温泉土司升级加料大制作北海道温泉土司升级加料大制作</view>
            <view class="not-shring txt-right">
              <view class="flex">
                <view class="font14">￥</view>
                <view class="font18">40.00</view>
              </view>
              <view class="font13 gray" style="text-align: right">x1</view>
            </view>
          </view>
        </view>
      </view>
      <view class="order-bg">
        <view class="bar flex-center-between">
          <view>订单编号</view>
          <view>23423423423434</view>
        </view>
        <view class="bar flex-center-between">
          <view>下单时间</view>
          <view>2024-12-24 15:32:22</view>
        </view>
      </view>
      <view class="footer-fixed">
        <button class="btn">取消订单</button>
        <button class="btn primary">立即支付</button>
      </view>
    </view>
  </f-view>
</template>

<script>
import FView from "@/pages/components/f-view.vue";
export default {
  name: "detail",
  components:{ FView },
  data () {
    return {
			
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {

  },
  methods: {
		
  }
}
</script>

<style lang="scss" scoped>
.tmp{
  flex: 1;
  min-width: 0;
}
	.bg{
		padding: 20rpx 20rpx 140rpx 20rpx;
	}
.pick-bg{
	background-color: white;
	border-radius: 20rpx;
  padding: 20rpx;
}
.line{
	border-bottom: 1rpx dashed #f2f2f2;
}
.title{
	width:150rpx;
}
.top-state{
  padding-top: 50rpx;
}
.good-bg{
	background-color: white;
	border-radius: 20rpx;
	padding: 20rpx;
	.cell{
		.pic{
			width: 100rpx;
			height: 100rpx;
			border-radius: 20rpx;
			background: yellowgreen;
		}
	}
}
.order-bg{
  padding: 20rpx;
  border-radius: 20rpx;
  background-color: white;
  .bar{
    padding: 10rpx 0;
  }
}
.footer-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  padding: 10rpx 20rpx 20rpx 10rpx;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  gap: 20rpx; /* 按钮间距 */
  align-items: center;
  box-shadow: 0 -2rpx 12rpx rgba(0,0,0,0.1);
}

.btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 30rpx;
}

.primary {
  background: #DEE082;
  color: white;
}
</style>